import React, {useContext,useState, FunctionComponentElement} from 'react'
import classNames from 'classnames'
import {CSSTransition} from 'react-transition-group'
import {MenuContext} from './menu'
import {MenuItemProps} from './menuItem'
import Transition from '../Transition/transition'
import Icon from '../Icon/icon'

export interface SubMenuProps {
    index?: string
    title: string
    className?: string
}

const SubMenu: React.FC<SubMenuProps> = (props)=> {
    const context = useContext(MenuContext)
    const {index,title, className, children} = props
    const openedSubMenus = context.defaultOpenSubMenus as Array<string>
    const isOpend = (index && context.mode === 'vertical') ? openedSubMenus.includes(index) : false
    const [menuOpen, setOpen] = useState(isOpend)
    const classes = classNames('menu-item submenu-item', className, {
        'is-active': context.index === index,
        'is-opened': menuOpen,
        'is-vertical': context.mode === 'vertical'
    })
    const handleClick = (e: React.MouseEvent) => {
        e.preventDefault()
        setOpen(!menuOpen)
    }
    let timer: any
    const handleMouse = (e: React.MouseEvent, toggle: boolean) => {
        clearTimeout()
        e.preventDefault()
        timer = setTimeout(() => {
            setOpen(toggle)
        }, 300)
    }

    // vertical 则添加点击事件
    const clickEvents = context.mode === 'vertical' ? {
        onClick: handleClick
    } : {}
    // 不是vertical 则添加鼠标事件
    const hoverEvents = context.mode !== 'vertical' ? {
        onMouseEnter: (e: React.MouseEvent) => {handleMouse(e, true)},
        onMouseLeave: (e: React.MouseEvent) => {handleMouse(e, false)}
    } : {}
    const renderChildren = () => {
        const subMenuClasses = classNames('menu-submenu', {
            'menu-opened': menuOpen
        })
        const childrenComponent = React.Children.map(children, (child, i)=> {
            const childrenElement = child as FunctionComponentElement<MenuItemProps>
            if(childrenElement.type.displayName=== 'MenuItem') {
                return React.cloneElement(childrenElement, {index: `${index}-${i}`});
            }else {
                console.error('Warning: SubMenu has a child which is not a MenuItem')            
            }
        })
        return (
            <Transition 
                in={menuOpen} 
                timeout={300} 
                animation="zoom-in-bottom"
            >
            <ul className={subMenuClasses}>
                {childrenComponent}
            </ul>
            </Transition>
        )
    }

    return (
        <li key={index} className={classes} {...hoverEvents}>
            <div className='submenu-title' onClick={handleClick} {...clickEvents}>
                {title}
                <Icon icon="angle-down" className="arrow-icon" />
            </div>
            {renderChildren()}
        </li>
    )
}

SubMenu.displayName = 'SubMenu'
export default SubMenu
